<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>即时通讯主界面</title>
	<link href="css/index.css" rel="stylesheet" type="text/css"/>

	<!-- 引入jQuery核心js文件 -->
	<script src="dep/jQuery/jquery-3.2.1.min.js"></script>
	<!-- 引入Bootstrap核心样式文件 -->
	<link href="dep/bootstrap/bootstrap.css" rel="stylesheet">
	<link href="dep/bootstrap/bootstrap-datetimepicker.min.css"  rel="stylesheet" />
	<script type="text/javascript" src="dep/jQuery/jquery.js"></script>
	<!-- 引入BootStrap核心js文件 -->
	<script src="dep/bootstrap/bootstrap.min.js"></script>
	<!-- 引入Scrollbar的样式 -->
	<link href="dep/jQuery/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
	<style>
		#inputArea:focus{
			border: hidden;
		}
		</style>


</head>
<body>
	<!-- banckground -->
	
	<div id="modifyNameBg" class="grayBg">
		<div id="modifyGroupNameDiv">
			<div>
				修改群名
				<button class="btnClose">X</button>
			</div>
			<div>
				<input type="text"/>
			</div>
			<button class="btnConfirm">确定</button>
		</div>
	</div>

	<div id="recordBg" class="grayBg">
		<div id="searchMessageDiv">
			<div class="padding10px">
				消息记录
				<button class="btnClose">X</button>
			</div>
			<div class="fontSize15px">
				<span>搜索内容:</span>
				<input id="searchVal" placeholder="梓桐" value=""/>
				<button onclick="showSearch()">确定</button>
			</div>
			<div id="messageDiv">
			<!--
				<div class="seperator">
					<span>2017-10-11</span>
				</div>
				
				<div class="remsg">
					<div class="msgTitle">
						<span class="msgName">阿门</span>
						<span class="msgTime">15:02:02</span>
					</div>
					<div class="msgCtxt">我今天见到梓桐了。</div>
				</div>
				
				<div class="remsg">
					<div class="msgTitle">
						<span class="msgName">贝塔</span>
						<span class="msgTime">20:33:44</span>
					</div>
					<div class="msgCtxt">我约了梓桐明天去逛街。</div>
				</div>
				
				
				<div class="seperator">
					<span>2017-11-15</span>
				</div>
				
				<div class="remsg">
					<div class="msgTitle">
						<span class="msgName">西格玛</span>
						<span class="msgTime">01:15:32</span>
					</div>
					<div class="msgCtxt">梓桐最近挺忙的。</div>
				</div>
				
			-->	
			</div>
		</div>
	</div>

	<ul id="mdialog-rclick-menu-div">
		<li func="1">置顶</li>
		<li func="3">修改群名</li>
		<li func="2">关闭聊天</li>
	</ul>
	
	<ul id="sdialog-rclick-menu-div">
		<li func="1">置顶</li>
		<li func="2">关闭聊天</li>
	</ul>
	
	<div class="back">
		<!-- 主要界面 -->
		<div class="main">
			<!-- 左侧布局 -->
			<div class="main-left">
				<!-- header -->
				<div class="header">
					<!-- 头像 -->
					<div class="avatar" id="headPic_div">
						<img class="img" id="headPic" src="">
					</div>
					<!-- 昵称信息 -->
					<div class="info">
						<h3 class="nickname">
							<span class="display-name" id="my_nickName_Top"></span>
							<span href="javascript:" class="opt">
                                <div class="dropdown">
								    <i class="web_chat_add" data-toggle="dropdown" aria-haspopup="true"
									   aria-expanded="false">
                                    <span class="caret"></span>
                                    </i>
                                    <ul class="dropdown-menu" aria-labelledby="dLabel">
                                        <!--<li><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">-->
										<!--添加好友-->
										<!--</button></li>-->
                                        <li><a href="#" data-toggle="modal" data-target="#myModal"
											   class="glyphicon glyphicon-user">&nbsp;添加好友</a></li>
                                        <li><a href="#" data-toggle="modal" data-target="#myModal_chat"
											   class="glyphicon glyphicon-flag"
											   onclick="default_choose()">&nbsp;发起聊天</a></li>
                                        <li><a href="#" class="glyphicon glyphicon-volume-down">&nbsp;关闭声音</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#" class="glyphicon glyphicon-off">&nbsp;退出</a></li>
                                    </ul>
                                </div>
							</span>
						</h3>
					</div>
				</div>
				<!-- end header -->
				<!-- search_bar -->
				<div class="search_bar" id="search_bar">
					<i class="web_chat_search"></i>
					<input type="text" placeholder="搜索" class="frm_search">
				</div>
				<!-- end search -->
				<!-- tab -->
				<div class="tab">
					<div class="tab_item" title="聊天">
						<a href="#" class="chat" title="聊天" >
							<i class="web_chat_tab_chat web_tab_hl"></i>
						</a>
					</div>
					<div class="tab_item" title="阅读">
						<a href="#" class="chat" title="阅读">
							<i class="web_chat_tab_public web_tab_hl"></i>
						</a>
					</div>
					<div class="tab_item" title="通讯录">
						<a href="#" class="chat" title="通讯录">
							<i class="web_chat_tab_friends web_tab_hl"></i>
						</a>
					</div>
				</div>
				<!--end tab-->
				<!-- 聊天记录联系人 -->
				<div class="nav_view">										
					<!-- chat_list -->
					<div class="scroll-wrapper chat_list scrollbar-dynamic nav_list">
						<div class="contact_list scrollbar-dynamic scroll-content scroll-scrolly_visible" id="J_NavChatScrollBody">
							
							<!--empty chat list
							<div class="empty_chat_list">
								<span class="empty_chat_list">暂无新消息</span>
							</div>-->


							<script>

								
							</script>
						
							<p class="ico_loading ng-hide">
								<img src="images/wait.gif" alt>正在获取最近的聊天...
							</p>
						<!--	<div class="chat_item slide-left ng-scope top" title="0000000">
								<div class="ext">
									<p class="attr">19:32</p>
								</div>
								<div class="avatar">
									<img src="images/3.jpg" class="img">
								</div>
								<div class="info">
									<h3 class="nickname" style="display: block;margin:0px">
										<span class="nickname_text">奥巴马</span>
									</h3>
									<p class="msg ng-scope">
										<span>吾皇万岁万岁万万岁</span>
									</p>
								</div>
							</div>-->
							
								
							
						</div>
					</div>
				</div>
			</div>
			
			
			
			
			
			<!-- 右侧布局 -->
			<div class="main-right" id="right_default" style="display: none">

				<div class="box_hd">
					<div class="title_wrap">
						<div class="title poi">
							<a href="" class="title_name"  title="000000">奥巴马</a>
						</div>
					</div>
				</div>
				<!-- end HD -->
				<div class="scroll-wrapper box_bd chat_bd scrollbar-dynamic" >

					<div class="chat_area">
						<div class="box_bd chat_bd scrollbar-dynamic scroll-content " id="message_list" >


							<!--聊天框内消息示例 start ------------------------------------------------------->
							<div  class="message" >

								<img class="avatar" src="images/6.jpg"  title="侯程程" >

								<div class="content">

									<h4  class="nickname" >
										侯程程
									</h4>

									<div class="bubble js_message_bubble ng-scope bubble_default left"  >
										<div class="bubble_cont" >
											<div class="plain">
												明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
											</div>
										</div>
									</div>
								</div>
							</div>

							<div  class="message me" >

								<img class="avatar" src="images/3.jpg"  title="狼人" >

								<div class="content" >
									<div class="bubble js_message_bubble bubble_primary  ng-scope bubble_default right"  >
										<div class="bubble_cont" >

											<div class="plain">
												<img class = "message_picture" src="images/4.jpg"/>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!--聊天框内消息示例 end ------------------------------------------------------->


						</div>
					</div>

					<!-- 下部面板 -->
					<div class="box_ft">
						<div class="toolbar" id="toolbar">
							<a id = "upload_file_a"  class="web_chat_pic js_fileupload webuploader-container">
									<input type="file" onchange="selectImageAsMessage(this);" name="file"  id = "upload_file_input"   class="webuploader-element-invisible" />
							</a>							
							

							<span class="right pointer" onclick="searchMessage()">消息记录<span/>





						</div>
						<!-- 发送区域 -->
						<div class="flex">
							<textarea name="mytextarea" id="inputArea"></textarea>
						</div>
						<div class="action">
							<span class="desc">按下Ctrl+Enter换行</span>
							<a class="btn btn_send" onclick="return sendMessage()">发送</a>
						</div>
					</div>
				</div>
			</div>


			<!--右侧显示联系人详细信息-->
			<div class="main-right" id="right_contacts" style="display: none">
				<div class="box_hd">
					<div class="title_wrap">
						<div class="title">详细信息</div>
					</div>
				</div>
				<div class="box_bd">
					<div class="">
						<div class="profile">

							<div class="msg_avatar">
								<img class="img" id="cont_photo" alt="" src="images/1.jpg">
							</div>

							<div class="msg_nickname">
								<h4 class="nickname" id="cont_Nick"></h4>
							</div>

							<!--<p class="nicheng">阿尔卑斯</p>-->

							<div class="detail_info">
								<div class="meta_item">
									<label class="meta_item_label">备注：</label>
									<p type="text" class="value" id="cont_nickName">
										<input type="text" class="input_update_nickName_friend" id="cont_nickName_input" value="">
									</p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">名称：</label>
									<p class="value" id="cont_userName"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">部门：</label>
									<p class="value" id="cont_department"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">&nbsp;I D：&nbsp;</label>
									<p class="value" id="cont_ID"></p>
								</div>
							</div>

							<div class="button">
								<a class="button_send" href="#" >发消息</a><br>
								<a class="button_del" href="#">删除好友</a>
							</div>
						</div>
					</div><!-- end ngIf: currentContact -->
					<!-- ngIf: !currentContact -->
				</div>
			</div>

			<!--右侧显示个人详细信息-->
			<div class="main-right" style="display: none" id="right_myself">
				<div class="box_hd">
					<div class="title_wrap">
						<div class="title">个人信息设置</div>
					</div>
				</div>
				<div class="box_bd">
					<div class="">
						<div class="profile">
							<div class="my_avatar">
								<img class="my_img" alt="" id="my_photo" src="">
							</div>

							<div align="center">
								<button type="button" class="btn btn-default" id="change_my_icon_btn1"
										style="margin-top: 8px; width:135px">更换头像
								</button>
								<!--<input onchange="selectImageAsHead(this);" type="file" name="file" id="change_my_icon_input1" class="webuploader-element-invisible"/>-->

								<input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*"  style="display: none">
								<!--<img src="../3.jpg" alt="" id="imgUrl">-->

							</div>

							<div class="my_userName">
								<h4 class="userName" id="my_nickName"></h4>
							</div>


							<div class="detail_my_info">
								<div class="meta_item">
									<label class="meta_item_label">&nbsp;I D：&nbsp;&nbsp;</label>
									<p class="value" id="myinfo_userID"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">名称：</label>
									<p class="value" id="myinfo_userName"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">昵称：</label>
									<p class="value">
										<input type="text" class="input_update_nickName" id="myinfo_nickName" value="">
									</p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">性别：</label>
									<p class="value">
										<label class="radio-inline">
											<input type="radio" name="sex" id="sex_male"
												   value="male" checked>男
										</label>
										<label class="radio-inline">
											<input type="radio" name="sex" id="sex_famale"
												   value="famale">女
										</label>
									</p>

								</div>
								<div class="meta_item">
									<label class="meta_item_label">部门：</label>
									<p class="value" id="myinfo_department"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">签名：</label>
									<p class="value">
										<input type="text" class="input_update" id="myinfo_msg" value="公无渡河，公竟渡河。" onclick="click_input()">
									</p>
								</div>
							</div>
							<div class="button">
								<a class="button_saveUpdate" id="saveUpdate_btn" href="#">保存修改</a>
							</div>
						</div>
					</div><!-- end ngIf: currentContact -->
					<!-- ngIf: !currentContact -->
				</div>
			</div>
		</div>
	</div>

	<!--模态框-->
	<!-- 添加好友 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		 style="margin-top: 100px">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel" align="center">添加好友</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-lg-8" style="width: 100%">
							<div class="input-group input-group-lg">
								<input type="text" class="form-control" placeholder="Search for..." size="500">
							</div><!-- /input-group -->
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_result">搜索
					</button>
				</div>
			</div>
		</div>
	</div>

	<!--新朋友--搜索结果悬浮框-->
	<div class="modal fade" id="myModal_result" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		 style="margin-top: 100px">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel_result" align="center">搜索结果</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-lg-8" style="width: 100%">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">搜索结果</h3>
								</div>
								<!--未搜索到结果-->
								<div class="panel-body">
									未搜索到任何结果
								</div>
							</div>

							<div class="panel panel-default">
								<!--搜索到好友-->
								<div class="panel-body">
									<!--<ul class="dropdown-menu" aria-labelledby="dLabel">-->
									<!--<li><a href="#" data-toggle="modal" data-target="#myModal">奥巴马</a></li>-->
									<!--</ul>-->
									<div class="chat_item slide-left" style="border-bottom-color: white">
										<div class="avatar">
											<img src="images/4.jpg" class="img1">
										</div>
										<div class="info" style="width: 200px" style="float: left;margin:0px;padding: 0px;">
											<h3 class="nickname1" style="display: block;margin:15px">
												<span class="nickname_text1" style="width: 200px">张三</span>
											</h3>
										</div>
										<div class="addUserBtn" align="right">
											<button type="button" class="btn btn-primary" style="float: right">添加</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 发起聊天 -->
	<div class="modal fade" id="myModal_chat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel_chat" align="center">发起聊天</h4>
				</div>
				<div class="modal-body">
					<div class="start_chat_hd">
						<ul class="nav_tabs">
							<li role="presentation" id="change_select_people" class="nav_tab selected"
								onclick='change_select("change_select_people" ,"change_select_groups","people_div","group_div")'>
								选择联系人
							</li>
							<li role="presentation" id="change_select_groups" class="nav_tab"
								onclick='change_select("change_select_groups","change_select_people","group_div","people_div")'>
								选择群聊
							</li>
						</ul>
					</div>
					<!--发起聊天好友部分   -->
					<div style="display: block" id="people_div">
						<div>
							<div class="input-group input-group-sm">
								<input type="text" class="form-control" placeholder="Search for..." size="500">
							</div><!-- /input-group -->
						</div>
						<div class="chooser" style="margin-top: 0px">
							<div class="start_chat_bd pre-scrollable contacts" style="position: relative;">
								<div class="contacts" style="height: 370px; margin-right: 0px; margin-bottom: 0px;">
									<div class="choose_all_List">
										<div style="height: 0px"></div>

										<div class="choose_list_ABC">
											<h4 class="contact_title">A</h4>
										</div>

										<div class="contact_item" id="123456">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user1" name="i_color"
												   onclick="changeColor('user1')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/1.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">a张三</h4>
											</div>
										</div>

										<div class="contact_item" id="12345">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user2" name="i_color"
												   onclick="changeColor('user2')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/2.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">啊啊</h4>
											</div>
										</div>

										<div class="choose_list_ABC">
											<h4 class="contact_title">B</h4>
										</div>

										<div class="contact_item" id="123457">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user3" name="i_color"
												   onclick="changeColor('user3')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/3.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">bupt</h4>
											</div>
										</div>

										<div class="choose_list_ABC">
											<h4 class="contact_title">D</h4>
										</div>

										<div class="contact_item" id="123458">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user4" name="i_color"
												   onclick="changeColor('user4')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/6.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">邓艾</h4>
											</div>
										</div>

										<div class="choose_list_ABC">
											<h4 class="contact_title">F</h4>
										</div>

										<div class="contact_item" id="123459">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user5" name="i_color"
												   onclick="changeColor('user5')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/4.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">冯杰</h4>
											</div>
										</div>

										<div class="choose_list_ABC">
											<h4 class="contact_title">G</h4>
										</div>

										<div class="contact_item" id="123450">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user6" name="i_color"
												   onclick="changeColor('user6')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/5.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">郭新</h4>
											</div>
										</div>

										<div class="choose_list_ABC">
											<h4 class="contact_title">O</h4>
										</div>

										<div class="contact_item" id="1234523">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user7" name="i_color"
												   onclick="changeColor('user7')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/7.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">欧服</h4>
											</div>
										</div>

										<div class="choose_list_ABC">
											<h4 class="contact_title">T</h4>
										</div>

										<div class="contact_item" id="1234435">
											<div class="opt">
												<i class="web_chat_choose_wireframe" id="user8" name="i_color"
												   onclick="changeColor('user8')"></i>
											</div>
											<div class="avatar">
												<img class="img" alt="" src="./images/9.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">泰坦</h4>
											</div>
										</div>


									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary">发起聊天</button>
						</div>
					</div>

					<!--发起聊天群组部分   -->
					<div style="display: none" id="group_div">
						<div class="chooser" style="margin-top: 0px">
							<div class="start_chat_bd pre-scrollable contacts" style="position: relative;">
								<div class="contacts" style="height: 370px; margin-right: 0px; margin-bottom: 0px;">
									<div class="choose_all_List">
										<div style="height: 0px"></div>

										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/1.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">web组</h4>
											</div>
										</div>

										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/2.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">iOS组</h4>
											</div>
										</div>

										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/3.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">bupt2017级学生</h4>
											</div>
										</div>

										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/6.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">安卓组</h4>
											</div>
										</div>

										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/4.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">三人行</h4>
											</div>
										</div>

										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/5.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">四人帮</h4>
											</div>
										</div>


										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/7.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">津门五人组</h4>
											</div>
										</div>

										<div class="group_item">
											<div class="avatar">
												<img class="img" alt="" src="./images/9.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">京津冀</h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script src="dep/jQuery/jquery-1.9.1.min.js"></script>
	<script src="dep/jQuery/jquery-ui-1.10.4.min.js"></script>
	<script src="dep/jQuery/jquery.mousewheel.min.js"></script>
	<script src="dep/jQuery/jquery.mCustomScrollbar.js"></script>
	<!--自定义逻辑js--------------------->
	<script src="js/index.js"></script>

	<script type='text/javascript'>
        var userId="000007";

		(function($){
			$(window).load(function(){
				$(".nav_list").mCustomScrollbar();
				//$(".chat_area").mCustomScrollbar();
			});
		})(jQuery);

        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/websocket/"+userId);
        }
        else {
            alert('当前浏览器 Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("WebSocket连接发生错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
           // setMessageInnerHTML("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var something = JSON.parse(event.data);
            console.log(event.data);
            //setMessageInnerHTML(event.data);
			//alert(something.message);

            messageAddLeft(something.from, something.message, "txt");
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("WebSocket连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
           // document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = $("#inputArea").val();
            var msg=JSON.stringify({
                "from": userId,
                "to": objectId,
                "message": message
            })
            websocket.send(msg);
        }
	</script>
	<script>



	</script>

</body>
</html>